@extends('layout.admin.master')
@section('css')
    <link rel="stylesheet" href="{{asset('org/wxbutton/wxbutton.css')}}">

@endsection
@section('content')
    <div class="card mt-4">
        <div class="card-body">
            <div class="header-body mt--5 mt-md--6">
                <div class="row align-items-center">
                    <div class="col">
                        <ul class="nav nav-tabs nav-overflow header-tabs">
                            <li class="nav-item">
                                <a href="{{route('wechat.wxbutton.index')}}" class="nav-link ">
                                    按钮列表
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{{route('wechat.wxbutton.create')}}" class="nav-link ">
                                    添加按钮
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="javascript:;" class="nav-link active">
                                    编辑按钮
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <form action="{{route('wechat.wxbutton.update',$wxbutton)}}" method="post">
            @csrf @method('PUT')
            <div class="row" id="app">
                <div class="col-5">
                    <div class="phone">
                        <div class="phone-container">
                            <div class="menu" v-for="(v,k) in bts.button">
                                <h5 @click="active(v)"><span @click="delto(k)" class="fe fe-x-circle"></span>@{{ v.name
                                    }}</h5>
                                <dd>
                                    <dl @click="active(m)" v-for="(m,n) in v.sub_button"><span @click="delse(v,n)"
                                                                                               class="fe fe-x-circle"></span>@{{
                                        m.name }}
                                    </dl>
                                    <dl v-if="v.sub_button.length<5" @click="addsecond(v)"><span
                                                class="fe fe-plus-circle"></span>添加二级
                                    </dl>
                                </dd>
                            </div>
                            <div class="menu" v-if="bts.button.length<3">
                                <h5 @click="addtopbutton()"><span class="fe fe-plus-circle"></span>添加菜单</h5>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-7">
                    <div class="card">
                        <div class="card-body">
                            <div class="form-group">
                                <label for="">按钮主题</label>
                                <input type="text" name="name" value="{{$wxbutton->name}}" class="form-control"
                                       placeholder="" aria-describedby="helpId">
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <div class="form-group">
                                <label for="">按钮名称</label>
                                <input type="text" v-model="bt.name" class="form-control" placeholder=""
                                       aria-describedby="helpId">
                            </div>
                            <div class="form-group">
                                <label for="">类型：</label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" v-model="bt.type" type="radio" value="view">
                                    <label class="form-check-label" for="inlineRadio1">链接</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" v-model="bt.type"
                                           name="inlineRadioOptions" id="inlineRadio2" value="click">
                                    <label class="form-check-label" for="inlineRadio2">关键词</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" v-model="bt.type"
                                           name="inlineRadioOptions" id="inlineRadio2" value="">
                                    <label class="form-check-label" for="inlineRadio2">按钮</label>
                                </div>
                            </div>
                            <div class="form-group" v-if="bt.type=='view'">
                                <label for="">链接</label>
                                <input type="text" v-model="bt.url" class="form-control" placeholder="" key="view-input"
                                       aria-describedby="helpId">
                            </div>
                            <div class="form-group" v-if="bt.type=='click'">
                                <label for="">关键词</label>
                                <input type="text" v-model="bt.key" class="form-control" placeholder="" key="click-inpt"
                                       aria-describedby="helpId">
                            </div>
                        </div>
                        <textarea hidden name="data" id="" cols="30" rows="10">@{{bts}}</textarea>
                        <button class="btn btn-success">保存数据</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
        @endsection

        @push('js')
            <script>
                require(['{{asset('org/wxbutton/wxbutton.js')}}'], function (wx) {
                    wx({!! $wxbutton['data'] !!} );
                })
            </script>
    @endpush
